
<template>
  <view class="notification-page">
    <!-- Tab切换 -->
    <view class="tab-container">
      <view
          class="tab-item"
          :class="{ active: activeTab === 'unread' }"
          @tap="switchTab('unread')"
      >
        未读通知
      </view>
      <view
          class="tab-item"
          :class="{ active: activeTab === 'read' }"
          @tap="switchTab('read')"
      >
        已读通知
      </view>
    </view>

    <!-- 通知列表 -->
    <scroll-view class="notification-list" scroll-y>
      <!-- 未读通知列表 -->
      <view v-if="activeTab === 'unread'">
        <view
            class="notification-item unread-item"
            v-for="(item, index) in unreadNotifications"
            :key="index"
            @tap="noticeDetail(item)"
        >
          <view class="notification-content">
            <text class="notification-title">{{ item.title }}</text>
            <view class="notification-meta">
              <text class="notification-date">{{ item.date }}</text>
              <text class="notification-sender">{{ item.sender }}</text>
            </view>
          </view>
          <view class="unread-dot"></view>
        </view>

        <!-- 空状态 -->
        <view v-if="unreadNotifications.length === 0" class="empty-state">
          <text class="empty-text">暂无未读通知</text>
        </view>
      </view>

      <!-- 已读通知列表 -->
      <view v-if="activeTab === 'read'">
        <view
            class="notification-item read-item"
            v-for="(item, index) in readNotifications"
            :key="index"
        >
          <view class="notification-content">
            <text class="notification-title">{{ item.title }}</text>
            <view class="notification-meta">
              <text class="notification-date">{{ item.date }}</text>
              <text class="notification-sender">{{ item.sender }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="readNotifications.length === 0" class="empty-state">
          <text class="empty-text">暂无已读通知</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>export default {
  data() {
    return {
      activeTab: 'unread', // 默认显示未读通知
      unreadNotifications: [
        {
          id: 1,
          title: '工地进度更新提醒',
          date: '2024-01-15 14:30',
          sender: '项目经理李经理'
        },
        {
          id: 2,
          title: '材料到货通知',
          date: '2024-01-15 10:15',
          sender: '仓库管理员王师傅'
        },
        {
          id: 3,
          title: '施工安全提醒',
          date: '2024-01-14 16:45',
          sender: '安全监督员张师傅'
        },
        {
          id: 4,
          title: '设计变更通知',
          date: '2024-01-14 09:20',
          sender: '设计师刘设计师'
        }
      ],
      readNotifications: [
        {
          id: 5,
          title: '付款提醒',
          date: '2024-01-13 11:30',
          sender: '财务部'
        },
        {
          id: 6,
          title: '节假日施工安排',
          date: '2024-01-12 15:20',
          sender: '项目总监陈总'
        },
        {
          id: 7,
          title: '质量检查通知',
          date: '2024-01-11 08:45',
          sender: '质检员赵师傅'
        }
      ]
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    },
    noticeDetail(item) {
      uni.navigateTo({
        url: `/pages/user/notice_detail?id=${item.id}`
      });
    },
  }
}
</script>

<style lang="scss" scoped>.notification-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.header-section {
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.page-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 36rpx;
  background: linear-gradient(to bottom, #e4393c, #409EFF);
  border-radius: 4rpx;
}

/* Tab样式 */
.tab-container {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #e4393c;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 6rpx;
  background-color: #e4393c;
  border-radius: 3rpx;
}

.notification-list {
  flex: 1;
  height: calc(100vh - 200rpx);
}

.notification-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  position: relative;
}

.notification-content {
  flex: 1;
}

.notification-title {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
}

.notification-date {
  font-size: 24rpx;
  color: #999;
}

.notification-sender {
  font-size: 24rpx;
  color: #666;
}

.unread-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #e4393c;
  border-radius: 50%;
  margin-left: 20rpx;
}

.read-item {
  opacity: 0.8;
}

.read-item .notification-title {
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}
</style>